<template>
    <div class="mv-details">
      <div class="list">
        <van-image :src="album.coverUrl" radius="50%"></van-image>
        <div>{{album.albumName}}</div>
        <div v-for="(item, index) in descr" :key="index" class="a">
          <div class="details">{{item.resource}}</div>
        </div>
        <!-- <div v-for="(item, index) in album" :key="index" class="mv">
            <h4>{{ item.albumName }}</h4>
            <div class="singers">
              <span v-for="(singer, index) in item.singer" :key="index"
                >{{ singer.name }}
                <span v-show="index != item.singer.length - 1"> / </span>
              </span>
              <span v-show="item.album.name">
                <span>·</span>
                <span>{{ item.album.name }}</span>
              </span>
              <span v-show="item.subtitle">
                <span>·</span>
                <span>{{ item.subtitle }}</span>
              </span>
            </div>
          </div> -->
        <van-list></van-list>
      </div>
    </div>
  </template>
  <script>
  // window.onload = function(){
  //   var a = document.getElementsByClassName("a");
  //   for(let i = 0;i<a.length;i++){
  //     var details = document.getElementsByClassName("details")[i].innerText;
  //     if(details == "<br>"){
  //       continue;
  //     }
  //     console.log(details)
  //   }
  // }
  export default {
    props: ["mvId"],
    data() {
      return {
        album: [], //vant的list列表数据
        // loading: false,
        // finished: false,
        // page: 1, //获取api数据的页码
        descr: []
      };
    },
    created() {
      this.getData();
    },
    methods: {
      getData() {
        this.$request("get", "/album/detail", {
          id: this.mvId,
        //   num: 30,
        //   page: this.page,
        }).then((res) => {
          console.log(res);
          this.album = res.album;
          this.descr = res.product.descr;
        });
      },
    },
  };
  </script>
  <style scoped>
  .header > span {
    font-size: 0.9rem;
  }
  .mv h4 {
    text-align: left;
    font-size: 1rem;
    padding: 0 2rem;
    /* margin: 0; */
  }
  .mv {
    margin-bottom: 1rem;
  }
  .mv {
    text-align: left;
    padding: 0 2rem;
  }
  .mv span {
    color: rgb(147, 147, 147);
    font-size: 0.8rem;
  }
  .mv > span:nth-last-child(2) > span:first-child {
    color: red;
    font-weight: 900;
    padding: 0 0.5rem;
  }
  .mv > span:nth-last-child(1) > span:first-child {
    color: red;
    font-weight: 900;
    padding: 0 0.5rem;
  }
  .list {
    margin: 0 1rem;
  }
  .van-image{
    width: 150px;
    height: 150px;
  }
  </style>
  
